import React, { FC } from 'react'
import Header from '@/compents/header/Header'
// import FloatButton from '@/compents/floatbutton/Index'
import Footer from '@/compents/footer/Footer'
import { MenuOutlined } from '@ant-design/icons'
import { Outlet } from 'react-router-dom'
import '@/compents/articleDetails/index.scss'
const Index: FC = () => {
  // 自定义方法 获取当前屏幕的宽度
  const fun = (): void => {
    // onresize 当前屏幕发生变化时 此方法会实时调用
    const head = window.document.querySelector('.head') as HTMLElement
    window.onresize = () => {
      if (document.documentElement.clientWidth < 750) {
        // 移动端
        head.style.display = 'block'
      } else {
        // pc端
        head.style.display = 'none'
      }
    }
  }
  fun()
  return (
    <div className="h100">
      <Header />
      <div className="content">
        <Outlet />
        {/* <FloatButton /> */}
      </div>
      <Footer />
      <div className="head">
        <div className="img2">
          <img
            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
            alt=""
          />
          <MenuOutlined
            style={{
              fontSize: '36px',
              color: 'red'
            }}
          />
        </div>
      </div>
    </div>
  )
}

export default Index
